<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>复选框/全选/全不选</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font: 12px/1.5 Tahoma;
        }

        dl {
            width: 120px;
            margin: 10px auto;
            padding: 10px 5px;
            border: 1px solid #666;
            border-radius: 5px;
            background: #fafafa;
        }

        dt {
            border-bottom: 2px solid #666;
            font-size: 12px;
        }

        dt label {
            font-weight: 700;
        }

        p {
            font: 12px/1.5 Tahoma;
            margin-top: 10px;
        }

        input[type="checkbox"] {
            vertical-align: middle;
            margin: 3px 3px 3px 4px;
        }
    </style>
    <script>
        window.onload = function () {
            var oA = document.getElementsByTagName("a")[0];
            var oInput = document.getElementsByTagName("input");
            var oLabel = document.getElementsByTagName("label")[0];

            //判断
            var isCheckAll = function () {
                for (var i = 1, n = 0; i < oInput.length; i++) {
                    oInput[i].checked && n++;
                }
                oInput[0].checked = (n == oInput.length-1 );
                console.log(oInput.length);
                console.log(n);
                oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选";
            }
            
            //动作
            oInput[0].onclick = function () {
                for (var i=1; i<oInput.length; i++){
                    oInput[i].checked = this.checked;
                    // 全选或非全选取决于this的checked值， 即oInput[0]的状态
                }
                isCheckAll();
            }

            oA.onclick = function(){
                for (var i=1; i<oInput.length; i++){
                    oInput[i].checked = ! oInput[i].checked;
                }
                isCheckAll();
            }

            for (var i=1; i<oInput.length; i++){
                oInput[i].onclick = function(){
                    isCheckAll();
                }
            }
        }
    </script>
</head>

<body>
    <dl>
        <dt>
            <input type="checkbox" id="checkAll">
            <label>全选</label>
            <a href="javascript:;">反选</a>
        </dt>
        <dd>
            <p>
                <input type="checkbox" name="item">
                <label>选项（一）</label>
            </p>
            <p>
                <input type="checkbox" name="item">
                <label>选项（二）</label>
            </p>
            <p>
                <input type="checkbox" name="item">
                <label>选项（三）</label>
            </p>
            <p>
                <input type="checkbox" name="item">
                <label>选项（四）</label>
            </p>
            <p>
                <input type="checkbox" name="item">
                <label>选项（五）</label>
            </p>
            <p>
                <input type="checkbox" name="item">
                <label>选项（六）</label>
            </p>
            <p>
                <input type="checkbox" name="item">
                <label>选项（七）</label>
            </p>
            <p>
                <input type="checkbox" name="item">
                <label>选项（八）</label>
            </p>
            <p>
                <input type="checkbox" name="item">
                <label>选项（九）</label>
            </p>
            <p>
                <input type="checkbox" name="item">
                <label>选项（十）</label>
            </p>
        </dd>
    </dl>
    <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
</body>

</html>